<!doctype html>
<html>
<head>
    <title>GQuery Effects Sample</title>
    <script language="javascript"
            src="FadeEffectsSample.nocache.js"></script>
	<style type="text/css">
		body {
		    font-family: Helvetica;
		}
		.reset {
		    float: left;
		}
		.foo {
		    border: 1px solid black;
		    font-size: 80%;
		}
	</style>
</head>
<body>
<h1>Fade Effects Samples</h1>
<p>This page lists and shows "fade style" effects available in GwtQuery</p>

<h2>FadeIn</h2>
<div id="fadeIn">
<div class="foo" style="width: 200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. Morbi in diam nibh. </div>
<button>FadeIn</button>
<button class="reset">Reset</button>
</div>

<h2>FadeOut</h2>
<div id="fadeOut">
<div class="foo" style="width: 200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. Morbi in diam nibh. </div>
<button>FadeOut</button>
<button class="reset">Reset</button>
</div>

<h2>FadeToogle</h2>
<div id="fadeToogle">
<div class="foo" style="width: 200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. Morbi in diam nibh. </div>
<button>FadeToogle</button>
</div>


<h2>Toogle</h2>
<div id="toogle">
<div class="foo" style="width: 200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. Morbi in diam nibh. </div>
<button>toogle</button>
</div>


</body>
</html>